{% extends 'main/base.html' %}
{% load static %}

{% block scripts %}
<script src="{% static 'question_banks/qb.js' %}" defer></script>
{% endblock scripts %}

{% block content %}
<h2 style="position:relative; text-align:center; margin-top:20px; margin-bottom:20px">{{qb.course}} : {{qb.topic}}</h2>
<div class="card ">
    <div class="card-header"> 
        <ul class="nav nav-tabs card-header-tabs pull-right"  id="myTab" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" id="open-tab" data-toggle="tab" href="#open" role="tab" aria-controls="open" aria-selected="true">Open</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="closed-tab" data-toggle="tab" href="#closed" role="tab" aria-controls="closed" aria-selected="false">Closed</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="unavailable-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="unavaiable" aria-selected="false">Unavailable</a>
            </li>
        </ul>
    </div>

    <div class="card-body">
        <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="open" role="tabpanel" aria-labelledby="open-tab">
              <div id="open-box"></div>
            </div>
            <div class="tab-pane fade" id="closed" role="tabpanel" aria-labelledby="profile-tab">
                <div id="closed-box"></div>
            </div>
            <div class="tab-pane fade" id="unavailable" role="tabpanel" aria-labelledby="unavailable-tab">
                <div id="upcoming-box"></div>
            </div>
        </div>
    </div>
  </div>

{% endblock %}